/**
 * @author zhangqiang
 * @data 2017/3/14
 *  地址列表
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {getOrderList,myListActive} from '../../actions/orderListActions';
import NoData from '../../components/orderList/noData';
import ListTab from '../../../../../../../src/js/components/order/listTab';
import ListCard from '../../../../../../../src/js/components/order/listCard';
import BottomMenu from '../../../../../../../src/js/components/bottomMenu';

import '../../../styles/orderList.scss'
import style from './index.scss'
import common from '../../utils/common'

class OrderList extends Component {
	constructor(props) {
		super(props)
		this.state = {
			orderList: [],
            isShow: true
		}
		this.cache = [[], [], []];
		this.handleIndexChange = this.handleIndexChange.bind(this);		
	}

	/**
	 * 生命周期
	 */
	componentWillMount() {

	}
	componentWillUnmount() {

	}

	toUrl(url) {
		this.context.router.push(url);
	}

	componentDidMount() {
		common.setViewTitle('我的订单');
        this.handleIndexChange(this.props.myListActive);
	}

	//处理Tab标签变化
    handleIndexChange(index) {
        this.props.dispatch(myListActive(index));
        this.setState({
            isShow: true
        });

        //如已加载则直接读取缓存
        if (this.cache[index] && this.cache[index].length > 0) {
            this.setState({
                orderList: this.cache[index],
                isShow: false
            })
        }
        else {
            let getData = {
                bizFlag: index + 1,
                orderType: 16,
            };
            this.props.dispatch(getOrderList(getData, (res) => {
                this.setState({
                    orderList: res.orderList,
                    isShow: false,
                });
                this.cache[index] = res.orderList;
            }))
        }
    }

	//底部跳转
	bottomHandle(index) {
		if (index == 0) {
			this.props.router.push('/');
		} else if (index == 1) {
			this.props.router.push('checkExpress');
		} else {
			this.props.router.push('orderList');
		}
	}

	render() {	
		return (
			<div className={style.orderList} style={{paddingBottom: '1rem'}}>

				<ListTab handleIndexChange={this.handleIndexChange} initActive={this.props.myListActive}/>
                <div style={{height: '.24rem'}}></div>
				{
                    this.state.isShow ? <div className={style.load}>加载中......</div> :
                        this.state.orderList.length ? this.state.orderList.map((item, index) =>
                            <ListCard
                                key={item.orderId} order={item} icon="./images/ems_send@2x.png" handleClick={() => {
                                this.toUrl(`orderDetails/${item.orderId}/${item.chargeOrderId}`)
                            }}
                            />
                        ) : <NoData/>
                }

				{/*底部导航菜单start*/}
                <BottomMenu active={2} onChange={(index) => {
                    this.bottomHandle(index);
                }} data={[{
                    text: '寄快递',
                    img: './images/sendEms.png',
                    checkedImg: './images/sendEms_checked.png'
                },{
					text: '查快递',
					img: './images/checkEms.png',
					checkedImg: './images/checkEms_checked.png'
				},{text: '我的订单', img: './images/my.png', checkedImg: './images/my_checked.png'}]}/>
                {/*底部导航菜单end*/}
			</div>
		)
	}
}

//使用context
OrderList.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderList.defaultProps = {
	data:[],
	index:['',''],
	headTag:[   //标签头部
		{
			name: '办理中',
			key: 1
		},{
			name: '已完成',
			key: 2
		},{
			name: '全部订单',
			key: 3
		}
	],
	orderList:[],
	list:[]
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderList);
}

export default connect(mapStateToProps)(OrderList)